<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东侧边栏</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        html,body{
            height:100%;
        }
        #right{
            width:270px;
            height:100%;
            border-left:6px solid #7a6e6e;
        }
        #wrap{
            height:100%;
            position:fixed;
            /*right:0px;*/
            right:-270px;
            z-index:8888;
        }
        #left{
            position:absolute;
            top:35%;
            height:100%;
            right:276px;
        }
        #left li{
            border-bottom:1px solid #fff;
            height:35px;
            width:35px;
            position:absolute;
            right:-6px;
            overflow: hidden;
            background:#7a6e6e;
            border-radius: 3px;
            text-align: center;
        }
        #left li:hover{
            background:#c81623;
        }
        #left li:hover span{
            background:#c81623;
        }
        #left .list{
            float:right;
            height:35px;
            width:35px;
            background:url(img/toolbars.png) no-repeat -88px -175px;
        }

        #left .list2{background-position:-50px 0; }
        #left .list3{background-position:-50px -50px; }
        #left .list4{background-position:-50px -100px; }
        #left .list5{background-position:-190px -150px; }
        #left .list6{background-position:-50px -150px; }
        #left .top{background-position:-50px -250px; }
        #left .bottom{background-position:-50px -300px; }

        #left span{
            width: 62px;
            height: 35px;
            line-height: 35px;
            color: #fff;
            text-align: center;
            font-size:12px;
            font-family: "微软雅黑";
            position: absolute;
            z-index: 1;
            right: 29px;
            top: 0;
            background-color: #7a6e6e;
        }
        #left .list7,#left .list8{
            position:fixed;
            z-index: 2;
            right:0px;
        }
        #left .list7{
            bottom:36px;
        }
        #left .list8{
            bottom:0px;
        }
    </style>
    <script src="jquery.js"></script>
    <script src="waterfall/move.js"></script>
    <script>
        window.onload=function(){
            $("#left li").hover(function(){
                $(this).stop().animate({width:91},200)
            },function(){
                $(this).stop().animate({width:35},20).top()
            })
            $("#left .list7,#left .list8").hover(function(){
                $(this).stop().animate({width:78},200)
            },function(){
                $(this).stop().animate({width:35},20)
            })
            $("#left li").eq(0).on("click",function(){
                $("#wrap").animate({right:0},200)
                $("#left .list7,#left .list8").animate({right:270},200)
            })
        }
    </script>
</head>
<body>
    <div id="wrap">
        <ul id="left">
            <li style="top:0"><em class="list"></em><span>京东会员</span></li>
            <li style="top:36px;"><em class="list2 list"></em><span>购物车</span></li>
            <li style="top:72px"><em class="list3 list"></em><span>我的关注</span></li>
            <li style="top:108px;"><em class="list4 list"></em><span>我的足迹</span></li>
            <li style="top:144px;"><em class="list5 list"></em><span>我的消息</span></li>
            <li style="top:180px;"><em class="list6 list"></em><span>资讯JIMI</span></li>
            <li class="list7"><em class="top list"></em><span>顶部</span></li>
            <li class="list8"><em class="bottom list"></em><span>反馈</span></li>
        </ul>
        <ul id="right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>